<template>
  <div class="main-warp">
    <dv-border-box-7 style="width:100%;height: 300px;  padding:25px;">
      <div class="head">
        <i class="iconfont icon-zuixin"></i>
        <div class="title">最新办结留言</div>
        <dv-decoration-2 style="width:100%;position:absolute;bottom:-4px;height:8px;"/>
      </div>
      <div class="content">
        <div class="heads jb">
          <div class="num">编号</div>
          <div class="title">标题</div>
          <div class="name">办理单位</div>
          <div class="time">办理时间</div>
        </div>
        <div class="dataTable">
          <vue-seamless-scroll :class-option="defineScroll" :data="data">
            <div class="data heads" v-for="(item,idx) in data" :key="idx">
              <div class="num">[{{idx*100000}}]</div>
              <div class="title">天台山公园会修建吗天台山公园会修建吗？天台山公园会修建吗？</div>
              <div class="name">成都市人力资源总储备中心</div>
              <div class="time">19:31</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </dv-border-box-7>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'newData',
  components: {                                            //2、注册
    vueSeamlessScroll
  },
  data() {
    return {
      data: [],
    }
  },
  computed: {
    defineScroll() {
      return {
        step: 2,
        limitMoveNum: 2,
        hoverStop: true,
        direction: 0,
        openWatch: true,
        singleHeight: 40,
        singleWidth: 0,
        waitTime: 6000,
      };
    },
  },
  created() {
    // this.ScrollUp();
    let c = [];
    for (let i = 0; i < 6; i++) {
      c.push(i)
    }
    this.data = c
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/thread.scss';

.main-warp {
  width: calc(calc(1460 / 3) * 2px - 10px);
  .icon-zuixin {
    font-size: 50px !important;
    margin-right: 2px !important;
  }

  .content {
    padding-top: 15px;
    color: #fff;
    font-size: 16px;

    .dataTable{
      overflow: hidden;
      height: 200px;
    }
    .heads {
      display: flex;
      text-align: center;
      width: 100%;
      flex-wrap: wrap;

      &.jb {
        background-image: -webkit-linear-gradient(top, #d3e4ff, #819cd9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bolder;
      }

      .num{
        width: 90px;
        text-align: left;
      }
      .title {
        text-align: left;
        width: 520px;
        margin-right: 20px;
      }

      .name {
        width: 180px;
        margin-right: 20px;
      }

      .time {
        width: 80px;
      }
    }

    .data {
      height:40px;
      line-height: 40px;
      position: relative;

      .title {
        cursor: pointer;
      }

      .name {
        font-size: 14px;
      }

      &:hover {
        color: #d3e4ff;
      }
    }
  }
}
</style>
